<template>
  <div class="archives-content">
    <div class="archives-main">
      <div class="archives-title">
        <span class="active">项目档案</span>
        <div>
          <span class="btn" @click="downFileById">档案下载</span>
          <span class="btn" v-if="year > 2022" @click="showEditBox"
            >项目编辑</span
          >
          <span class="btn" v-if="year > 2022" @click="showRemindBox"
            >调度提醒</span
          >
          <span class="btn" @click="$router.go(-1)">返 回</span>
        </div>
      </div>
      <div class="archives-flex">
        <div class="archives-left ">
          <div class="detail-title">{{ projectInfo.project_name }}档案</div>
          <div class="archives" ref="archives">
            <div class="title-weight">项目标签</div>
            <div class="flex-box">
              <p>
                <span class="label">项目名称：</span>
                <el-tooltip
                  class="item"
                  effect="light"
                  :content="projectInfo.project_name"
                  placement="top-start"
                >
                  <el-input
                    v-model="projectInfo.project_name"
                    disabled
                  ></el-input>
                </el-tooltip>
              </p>

              <p>
                <span class="label">项目编号：</span>
                <el-input v-model="projectInfo.project_num" disabled></el-input>
              </p>
            </div>
            <div class="title-weight">基本情况</div>
            <div class="flex-box">
              <p>
                <span class="label">项目类型： </span>
                <el-input
                  :value="
                    projectInfo.is_importance == '市重点项目' ||
                    projectInfo.is_importance == '是'
                      ? '市重点项目'
                      : projectInfo.is_importance == '否'
                      ? '非市重点项目'
                      : ''
                  "
                  disabled
                ></el-input>
              </p>
              <p>
                <span class="label">项目所属行业：</span>
                <el-input v-model="projectInfo.industry" disabled></el-input>
              </p>

              <p>
                <span class="label">承接县区：</span>
                <el-input v-model="projectInfo.district" disabled></el-input>
              </p>
              <p>
                <span class="label">具体地址：</span>
                <el-tooltip
                  class="item"
                  effect="light"
                  :content="projectInfo.site"
                  placement="top-start"
                >
                  <el-input v-model="projectInfo.site" disabled></el-input>
                </el-tooltip>
              </p>
              <p>
                <span class="label">项目单位（投资方）：</span>
                <el-tooltip
                  class="item"
                  effect="light"
                  :content="projectInfo.project_unit"
                  placement="top-start"
                >
                  <el-input
                    v-model="projectInfo.project_unit"
                    disabled
                  ></el-input>
                </el-tooltip>
              </p>
              <p>
                <span class="label">项目引进省份：</span>
                <el-input
                  :value="projectInfo.province.replace('；', '')"
                  disabled
                ></el-input>
              </p>
              <p>
                <span class="label">总投资额（亿元）：</span>
                <el-input
                  v-model="projectInfo.investment_volume"
                  disabled
                ></el-input>
              </p>

              <p>
                <span class="label">项目亩均强度（万）：</span>
                <el-input
                  v-model="projectInfo.acre_intensity"
                  disabled
                ></el-input>
              </p>
              <p class="long">
                <span class="label">建设内容：</span>
                <el-input
                  v-model="projectInfo.construction_content"
                  type="textarea"
                  disabled
                ></el-input>
              </p>
              <p class="long">
                <span class="label">项目诉求：</span>
                <el-input
                  v-model="projectInfo.project_appeal"
                  type="textarea"
                  disabled
                ></el-input>
              </p>
              <p class="long">
                <span class="label">企业承诺：</span>
                <el-input
                  v-model="projectInfo.project_promise"
                  type="textarea"
                  disabled
                ></el-input>
              </p>
            </div>
            <div class="title-weight">项目进度</div>
            <div class="flex-box">
              <p>
                <span class="label">进度节点： </span>
                <el-input
                  v-model="projectInfo.schedule_node"
                  disabled
                ></el-input>
              </p>
              <p></p>
              <p>
                <span class="label">签约时间：</span>
                <el-input v-model="projectInfo.time1" disabled></el-input>
              </p>
              <p>
                <span class="label">开工时间：</span>
                <el-input v-model="projectInfo.time2" disabled></el-input>
              </p>
              <!-- <p>
                <span class="label">投产时间：</span>
                <el-input v-model="projectInfo.time3" disabled></el-input>
              </p>
              <p></p> -->

              <p class="long long-more">
                <span class="label">项目进展：</span>
                <strong class="schedule">
                  <span v-for="item in Schedule_list" :key="item.time">
                    {{ item.time }} <em>{{ "\ \ \ \ " }}</em>
                    {{ item.item }}
                  </span>
                </strong>
                <!-- <el-input
                  v-model="projectInfo.project_schedule"
                  type="textarea"
                  disabled
                ></el-input> -->
              </p>
              <p class="long">
                <span class="label">近期计划：</span>
                <el-input
                  v-model="projectInfo.plan"
                  type="textarea"
                  disabled
                ></el-input>
              </p>
              <p class="long">
                <span class="label">需要解决的问题：</span>
                <el-input
                  v-model="projectInfo.project_problem"
                  type="textarea"
                  disabled
                ></el-input>
              </p>
              <p class="long">
                <span class="label">调度情况：</span>
                <el-input
                  v-model="projectInfo.schedule_condition"
                  type="textarea"
                  disabled
                ></el-input>
              </p>
              <p class="long">
                <span class="label">督办要求：</span>
                <el-input
                  v-model="projectInfo.supervisory_requirements"
                  type="textarea"
                  disabled
                ></el-input>
              </p>
            </div>
            <div class="title-weight">其它信息</div>
            <div class="flex-box">
              <p>
                <span class="label">资金到位情况： </span>
                <el-input
                  :value="
                    (projectInfo.capital_condition_type || '') +
                      '' +
                      (projectInfo.capital_condition_money || '')
                  "
                  disabled
                ></el-input>
              </p>

              <p>
                <span class="label">是否报入13710系统：</span>
                <el-input
                  v-model="projectInfo.is_enter13710"
                  disabled
                ></el-input>
              </p>
              <p>
                <span class="label">项目来源：</span>
                <el-input
                  v-model="projectInfo.project_source"
                  disabled
                ></el-input>
              </p>
            </div>
            <div class="title-weight">联系人</div>
            <div class="flex-box">
              <p>
                <span class="label">项目负责人： </span>
                <el-input
                  v-model="projectInfo.project_people"
                  disabled
                ></el-input>
              </p>
              <p>
                <span class="label">项目承接地联系人：</span>
                <el-input
                  v-model="projectInfo.district_people"
                  disabled
                ></el-input>
              </p>
              <p>
                <span class="label">项目单位联系人：</span>
                <el-input
                  v-model="projectInfo.unity_people"
                  disabled
                ></el-input>
              </p>
            </div>
            <div class="title-weight">附件</div>
            <div v-for="item of file_list" :key="item.name" class="file-list">
              <img
                v-if="
                  item.file_name.split('.')[
                    item.file_name.split('.').length - 1
                  ] == 'xls' ||
                    item.file_name.split('.')[
                      item.file_name.split('.').length - 1
                    ] == 'xlsx'
                "
                src="~@img/upload/icon-excel.png"
                alt=""
              />
              <img
                v-if="
                  item.file_name.split('.')[
                    item.file_name.split('.').length - 1
                  ] == 'pdf'
                "
                src="~@img/upload/icon-pdf.png"
                alt=""
              />
              <img
                v-if="
                  item.file_name.split('.')[
                    item.file_name.split('.').length - 1
                  ] == 'docx'
                "
                src="~@img/upload/icon-word.png"
                alt=""
              />

              <img src="" alt="" />
              <span class="name">{{ item.file_name }}</span>
              <span @click="goFile(item)" class="img111">
                <img src="~@img/upload/icon-eye.png" alt="" />
                <span class="s">预览</span>
              </span>
              <span @click="downFile(item)" class="img111">
                <img src="~@img/project/icon-download.png" alt="" />
                <span class="s">下载</span>
              </span>
            </div>
            <div v-if="file_list.length == 0">
              <span class="null">尚未上传附件</span>
            </div>
            <div class="img-group flex-box">
              <p><span class="label">项目图片：</span></p>
              <p></p>
              <p v-for="(item, index) of img_list" :key="index">
                <el-image
                  style="width: 100%;"
                  :src="item.file_url"
                  :preview-src-list="srcList"
                >
                </el-image>
                <!-- <img :src="item.file_url" alt="" /> -->
                <span class="img-btn">
                  <span class="ellipsis"> {{ item.file_name }} </span>
                  <span class="img111" @click="downImg(item)">
                    <img src="~@img/project/icon-download.png" alt="" />
                    <span class="s">下载</span>
                  </span>
                </span>
              </p>
              <p v-if="img_list.length == 0">
                <span class="null">尚未上传图片</span>
              </p>
            </div>
          </div>
          <div class="go-top" @click="goTop">
            返回顶部
          </div>
        </div>
        <div class="archives-right">
          <div class="work">
            <img src="~@/assets/img/project/icon-record.png" alt="" />
            <span>工作动态</span>
          </div>
          <ul class="work-list">
            <li v-for="(item, index) in logList" :key="index">
              <span class="yuan"></span>
              <p>
                {{ item.operation_people + item.item }}
                <span class="time">{{ item.time }} </span>
              </p>
            </li>
            <li class="last" v-if="logList.length < logTotal" @click="nextLog">
              <div class="more">
                <!-- @click="moreDynamic" -->
                加载更多动态 <img src="~@img/project/icon-more2.png" alt="" />
              </div>
            </li>
            <li class="last" v-if="logList.length == logTotal">
              <div class="none">- 已全部加载完成 -</div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <el-dialog
      class="not-padding"
      title="调度提醒"
      :visible.sync="showRemind"
      :show-close="false"
    >
      <div class="card-tip">
        <div>
          <span :class="type == 'db' ? 'active' : ''" @click="type = 'db'"
            ><span>调度情况</span></span
          >
          <span :class="type == 'dd' ? 'active' : ''" @click="type = 'dd'"
            ><span>督办提醒</span></span
          >
        </div>
        <el-input
          v-if="type == 'db'"
          v-model="scheduling_condition"
          type="textarea"
        ></el-input>
        <el-input
          v-if="type == 'dd'"
          v-model="supervised_remind"
          type="textarea"
        ></el-input>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showRemind = false">
          取 消
        </el-button>
        <el-button type="primary" @click="remind">
          确 认
        </el-button>
      </div>
    </el-dialog>
    <el-dialog
      class="edit-dialog"
      title="项目信息编辑"
      :visible.sync="showEdit"
      :show-close="false"
    >
      <div>
        <div class="archives" ref="archives">
          <div class="title-weight">基本信息</div>
          <div class="flex-box flex-box-2">
            <p>
              <span class="label">上传人：{{ editInfo.upload_people }}</span>
            </p>
            <p>
              <span class="label">负责人单位：{{ editInfo.upload_unity }}</span>
            </p>
            <p>
              <span class="label">上传时间：{{ editInfo.upload_time }}</span>
            </p>
          </div>
          <div class="title-weight">项目标签</div>
          <div class="flex-box">
            <p>
              <span class="label">项目名称：</span>
              <el-input v-model="editInfo.project_name"></el-input>
            </p>
            <p>
              <span class="label">项目编号：</span>
              <el-input v-model="editInfo.project_num" disabled></el-input>
            </p>
          </div>
          <div class="title-weight">基本情况</div>
          <div class="flex-box">
            <p>
              <span class="label">项目类型： </span>
              <el-select
                v-model="editInfo.is_importance"
                clearable
                placeholder=""
              >
                <el-option
                  v-for="item in options_key"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </p>
            <p>
              <span class="label">项目所属行业：</span>
              <el-select v-model="editInfo.industry" clearable placeholder="">
                <el-option
                  v-for="item in options_industry"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </p>

            <p>
              <span class="label">承接县区：</span>
              <el-select v-model="editInfo.district" clearable placeholder="">
                <el-option
                  v-for="item in options_district"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </p>
            <p>
              <span class="label">具体地址：</span>
              <el-input v-model="editInfo.site"></el-input>
            </p>
            <p>
              <span class="label">项目单位（投资方）：</span>
              <el-input v-model="editInfo.project_unit"></el-input>
            </p>

            <p>
              <span class="label">项目引进省份：</span>

              <el-cascader
                v-model="editInfo.province"
                :options="options_province2"
                :props="{
                  value: 'value',
                  label: 'label',
                  checkStrictly: true,
                }"
                placeholder="请选择项目引省份"
                clearable
              ></el-cascader>
            </p>
            <p>
              <span class="label">总投资额（亿元）：</span>
              <el-input v-model="editInfo.investment_volume"></el-input>
            </p>

            <p>
              <span class="label">项目亩均强度（万）：</span>
              <el-input v-model="editInfo.acre_intensity"></el-input>
            </p>
            <p class="long">
              <span class="label">建设内容：</span>
              <el-input
                v-model="editInfo.construction_content"
                type="textarea"
              ></el-input>
            </p>
            <p class="long">
              <span class="label">项目诉求：</span>
              <el-input
                v-model="editInfo.project_appeal"
                type="textarea"
              ></el-input>
            </p>
            <p class="long">
              <span class="label">企业承诺：</span>
              <el-input
                v-model="editInfo.project_promise"
                type="textarea"
              ></el-input>
            </p>
          </div>
          <div class="title-weight">项目进度</div>
          <div class="flex-box">
            <p>
              <span class="label">进度节点： </span>
              <el-select
                v-model="editInfo.schedule_node"
                clearable
                placeholder=""
              >
                <el-option
                  v-for="item in options_node"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </p>
            <p></p>
            <p>
              <span class="label">签约时间：</span>

              <el-date-picker
                v-model="editInfo.time1"
                type="date"
                format="yyyy/MM/dd"
                value-format="yyyy/MM/dd"
                placeholder="选择日期"
              >
              </el-date-picker>

              <!--  :disabled="editInfo.schedule_node != '已签约' ? true : false"  -->
            </p>
            <p>
              <span class="label">开工时间：</span>
              <el-date-picker
                v-model="editInfo.time2"
                type="date"
                format="yyyy/MM/dd"
                value-format="yyyy/MM/dd"
                placeholder="选择日期"
              >
              </el-date-picker>
              <!--  :disabled="editInfo.schedule_node != '已开工' ? true : false"  -->
            </p>
            <p>
              <span class="label">投产时间：</span>
              <el-date-picker
                v-model="editInfo.time3"
                type="date"
                format="yyyy/MM/dd"
                value-format="yyyy/MM/dd"
                placeholder="选择日期"
              >
              </el-date-picker>
              <!--  :disabled="editInfo.schedule_node != '已投产' ? true : false"  -->
            </p>
            <p></p>

            <p class="long long-more">
              <span class="label">项目进展：</span>
              <el-input
                v-model="editInfo.project_schedule"
                type="textarea"
              ></el-input>
            </p>
            <p class="long">
              <span class="label">近期计划：</span>
              <el-input v-model="editInfo.plan" type="textarea"></el-input>
            </p>
            <p class="long">
              <span class="label">需要解决的问题：</span>
              <el-input
                v-model="editInfo.project_problem"
                type="textarea"
              ></el-input>
            </p>
          </div>
          <div class="title-weight">其它信息</div>
          <div class="flex-box">
            <p>
              <span class="label">资金到位情况： </span>
              <span class="money">
                <el-select
                  v-model="editInfo.capital_condition_type"
                  clearable
                  placeholder="请选择情况"
                >
                  <el-option
                    v-for="item in options_capital"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>

                <el-input
                  v-model="editInfo.capital_condition_money"
                  placeholder="请输入资金（亿元）"
                ></el-input>
              </span>
            </p>
            <p>
              <span class="label">是否报入13710系统：</span>
              <el-select
                v-model="editInfo.is_enter13710"
                clearable
                placeholder=""
              >
                <el-option
                  v-for="item in options_is"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </p>
            <p>
              <span class="label">项目来源：</span>
              <el-select
                v-model="editInfo.project_source"
                clearable
                placeholder=""
              >
                <el-option
                  v-for="item in options_source"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </p>
          </div>
          <div class="title-weight">联系人</div>
          <div class="flex-box">
            <p>
              <span class="label">项目负责人： </span>
              <el-input v-model="editInfo.project_people"></el-input>
            </p>
            <p>
              <span class="label">项目承接地联系人：</span>
              <el-input v-model="editInfo.district_people"></el-input>
            </p>
            <p>
              <span class="label">项目单位联系人：</span>
              <el-input v-model="editInfo.unity_people"> </el-input>
            </p>
          </div>
          <div class="title-weight">附件上传</div>
          <div class="upload">
            <el-upload
              class="upload-demo files "
              ref="upload"
              action=""
              :limit="20"
              :multiple="true"
              accept=".pdf,.docx"
              :before-upload="beforeUpload"
              :http-request="uploadFile"
              :on-remove="handleRemove"
              :auto-upload="false"
              :file-list="fileList"
              :show-file-list="false"
              :on-change="changeFile"
            >
              <el-button size="small" type="primary">
                <img src="~@img/project/icon-add.png" alt="" />选择文件
              </el-button>
              <div slot="tip" class="el-upload__tip">
                （上传文件的类型 pdf,docx）
              </div>
            </el-upload>
          </div>

          <div
            v-for="item of changeFileList"
            :key="item.name"
            class="file-list"
          >
            <div v-if="item.uid">
              <img
                v-if="
                  item.name.split('.')[item.name.split('.').length - 1] ==
                    'xls' ||
                    item.name.split('.')[item.name.split('.').length - 1] ==
                      'xlsx'
                "
                src="~@img/upload/icon-excel.png"
                alt=""
              />
              <img
                v-if="
                  item.name.split('.')[item.name.split('.').length - 1] == 'pdf'
                "
                src="~@img/upload/icon-pdf.png"
                alt=""
              />
              <img
                v-if="
                  item.name.split('.')[item.name.split('.').length - 1] ==
                    'docx'
                "
                src="~@img/upload/icon-word.png"
                alt=""
              />

              <img src="" alt="" />
              <span class="name">{{ item.name }}</span>
              <span @click="lookFile(item)" class="img111">
                <img src="~@img/upload/icon-eye.png" alt="" />
                <span class="s">预览</span>
              </span>
              <span @click="delFile(item)" class="img222">
                <img src="~@img/upload/icon-delete.png" alt="" />
                <span class="d">删除</span>
              </span>
            </div>
            <div v-else>
              <img
                v-if="
                  item.file_name.split('.')[
                    item.file_name.split('.').length - 1
                  ] == 'xls' ||
                    item.file_name.split('.')[
                      item.file_name.split('.').length - 1
                    ] == 'xlsx'
                "
                src="~@img/upload/icon-excel.png"
                alt=""
              />
              <img
                v-if="
                  item.file_name.split('.')[
                    item.file_name.split('.').length - 1
                  ] == 'pdf'
                "
                src="~@img/upload/icon-pdf.png"
                alt=""
              />
              <img
                v-if="
                  item.file_name.split('.')[
                    item.file_name.split('.').length - 1
                  ] == 'docx'
                "
                src="~@img/upload/icon-word.png"
                alt=""
              />

              <img src="" alt="" />
              <span class="name">{{ item.file_name }}</span>
              <span @click="goFile(item)" class="img111">
                <img src="~@img/upload/icon-eye.png" alt="" />
                <span class="s">预览</span>
              </span>
              <span @click="delFile(item)" class="img222">
                <img src="~@img/upload/icon-delete.png" alt="" />
                <span class="d">删除</span>
              </span>
            </div>
          </div>

          <div class="title-weight">项目图片</div>
          <div class="upload">
            <el-upload
              class="upload-demo files "
              ref="upload"
              action=""
              :limit="20"
              accept=".png,.jpg,.jpeg"
              :multiple="true"
              :before-upload="beforeUpload_img"
              :http-request="uploadFile_img"
              :on-remove="handleRemove_img"
              :show-file-list="false"
              :auto-upload="false"
              :file-list="fileList_img"
              :on-change="changeFile_img"
            >
              <el-button size="small" type="primary">
                <img src="~@img/project/icon-add.png" alt="" />上传图片
              </el-button>
              <div slot="tip" class="el-upload__tip">
                （上传文件的类型 png,jpg,jpeg）
              </div>
            </el-upload>
          </div>
          <div class="img-group flex-box">
            <p v-for="item of changeFileList_img" :key="item.name">
              <span v-if="item.uid">
                <img :src="item.url" alt="" />
                <!-- <el-image
                  style="width: 100%;"
                  :src="item.url"
                  :preview-src-list="[item.url]"
                >
                </el-image> -->
                <span class="img-btn">
                  <span>{{ item.name }}</span>
                  <span class="img222" @click="DelImg(item)">
                    <img src="~@img/upload/icon-delete.png" alt="" />
                    <span class="d">删除</span>
                  </span>
                </span>
              </span>
              <span v-else>
                <img :src="item.file_url" alt="" />

                <span class="img-btn">
                  <span>{{ item.file_name }}</span>
                  <span class="img222" @click="DelImg(item)">
                    <img src="~@img/upload/icon-delete.png" alt="" />
                    <span class="d">删除</span>
                  </span>
                </span>
              </span>
            </p>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showEdit = false">
          取 消
        </el-button>
        <el-button type="primary" @click="saveEdit">
          保 存
        </el-button>
      </div>
    </el-dialog>
    <div class="file-show" v-if="openFile">
      <div class="gb" @click="closeFileShow">关 闭</div>
      <iframe v-if="showFileBySrc" :src="fileSrc" frameborder="0"></iframe>
      <div v-else ref="word" class="word"></div>
    </div>
  </div>
</template>
<script>
let docx = require("docx-preview");
import { $_downloadFile } from "@/utils/download";
import MapData from "@/utils/mapData.json";
import {
  CheckProjectDetail,
  ProjectEdit,
  ScheduleRemind,
  GetDynamicLog,
  DownloadFile,
  FileDelete,
} from "@/api/project_three";
import { downFilesBy50, downFilesBy06 } from "@/api/index";
import { exportWordDocx } from "@/utils/exportWordDocx.js";

export default {
  data() {
    return {
      // 权限列表
      permission: [],
      // 是否直接展示修改框
      showEditOnce: false,
      showFileBySrc: false,
      fileSrc: "",
      openFile: false,
      // 项目id
      projectId: null,
      // 是否当年项目
      year: 2023,
      // 项目文档信息
      projectInfo: {},
      // 项目进展列表
      Schedule_list: [],
      // 文件列表
      file_list: [],
      // 图片列表
      img_list: [],
      srcList: [],
      // 编辑页面 所需字段
      showEdit: false,
      editInfo: {},
      fileList: [],
      changeFileList: [],
      fileList_img: [],
      changeFileList_img: [],
      img_del_list: [],
      file_del_list: [],

      // 下拉框筛选项
      options_capital: [
        { label: "固投资金", value: "固投资金" },
        { label: "非固投资金", value: "非固投资金" },
      ],
      options_is: [
        { label: "是", value: "是" },
        { label: "否", value: "否" },
      ],
      options_key: [
        { label: "市重点项目", value: "是" },
        { label: "非市重点项目", value: "否" },
      ],
      options_district: [
        { label: "小店区", value: "小店区" },
        { label: "迎泽区", value: "迎泽区" },
        { label: "杏花岭区 ", value: "杏花岭区 " },
        { label: "尖草坪区 ", value: "尖草坪区 " },
        { label: "万柏林区 ", value: "万柏林区 " },
        { label: "晋源区", value: "晋源区" },
        { label: "古交市", value: "古交市" },
        { label: "清徐县", value: "清徐县" },
        { label: "阳曲县", value: "阳曲县" },
        { label: "娄烦县", value: "娄烦县" },
        { label: "中北高新区", value: "中北高新区" },
        { label: "清徐开发区", value: "清徐开发区" },
        { label: "西山示范区", value: "西山示范区" },
        { label: "阳曲示范区", value: "阳曲示范区" },
      ],
      options_node: [
        { label: "在谈", value: "在谈" },
        { label: "拟签约", value: "拟签约" },
        { label: "已签约", value: "已签约" },
        { label: "拟开工", value: "拟开工" },
        { label: "已开工", value: "已开工" },
        { label: "拟投产", value: "拟投产" },
        { label: "已投产", value: "已投产" },
        { label: "暂停/终止", value: "暂停/终止" },
      ],
      options_source: [
        { label: "自行对接", value: "自行对接" },
        { label: "省市推荐", value: "省市推荐" },
        { label: "招商部门推荐", value: "招商部门推荐" },
        { label: "以商招商", value: "以商招商" },
        { label: "校友招商", value: "校友招商" },
        { label: "中介招商", value: "中介招商" },
        { label: "产业链招商", value: "产业链招商" },
        { label: "其它来源", value: "其它来源" },
      ],
      options_industry: [
        { label: "特种金属材料", value: "特种金属材料" },
        { label: "新型化工材料", value: "新型化工材料" },
        { label: "新一代电子信息制造", value: "新一代电子信息制造" },
        { label: "高端装备制造", value: "高端装备制造" },
        { label: "新能源", value: "新能源" },
        { label: "生物基新材料", value: "生物基新材料" },
        { label: "现代农业", value: "现代农业" },
        { label: "生态文旅休闲类", value: "生态文旅休闲类" },
        { label: "现代服务业", value: "现代服务业" },
        { label: "基础设施和社会民生类", value: "基础设施和社会民生类" },
        { label: "其他工业类项目", value: "其他工业类项目" },
      ],
      options_province: [
        {
          label: "全国各省市引进项目",
          value: "全国各省市引进项目",
          children: MapData,
        },
        { label: "山西省域外引进项目", value: "山西省域外引进项目" },
        {
          label: "重点区域引进项目",
          value: "重点区域引进项目",
          children: [
            { label: "京津冀", value: "京津冀" },
            { label: "长三角", value: "长三角" },
            { label: "粤港澳大湾区", value: "粤港澳大湾区" },
          ],
        },
        { label: "太原市域外引进项目", value: "太原市域外引进项目" },
      ],
      options_province2: MapData,
      // 调度提醒 所需参数
      showRemind: false,
      type: "db",
      scheduling_condition: "",
      supervised_remind: "",
      // 工作动态 所需参数
      logList: [],
      log_page: 1,
      log_per_page: 20,
      logTotal: 0,
      // 是否可以进行展示更多项目动态
      next: true,
    };
  },
  mounted() {
    this.permission = localStorage.getItem("funcList").split(",");
    console.log(this.permission);
    this.showEditOnce = localStorage.getItem("showEdit") || "false";
    console.log(localStorage.getItem("showEdit"));
    console.log(this.showEditOnce);
    this.projectId = this.$route.params.id;
    this.getProjectDetail();
    this.getLog();
  },
  methods: {
    // 获取项目详情
    async getProjectDetail() {
      let res = await CheckProjectDetail({ project_id: this.projectId });
      if (res.code && res.code != 0) {
        this.projectInfo = {
          capital_condition_money: null,
          capital_condition_type: null,
          construction_content: null,
          district: null,
          district_people: null,
          id: this.projectId,
          industry: null,
          investment_volume: null,
          is_enter13710: null,
          is_importance: null,
          plan: null,
          project_appeal: null,
          project_name: null,
          project_people: null,
          project_problem: null,
          project_promise: null,
          project_schedule: null,
          project_source: null,
          project_unit: null,
          province: null,
          schedule_node: null,
          site: null,
          time1: null,
          time2: null,
          time3: null,
          unity_people: null,
        };
        this.Schedule_list = [];
        this.file_list = [];
        this.img_list = [];
        this.srcList = [];
      } else {
        this.projectInfo = res.project_data;

        this.Schedule_list = res.Schedule_data;
        this.file_list = res.file_data;
        this.img_list = res.img_data;
        this.srcList = res.img_data.map((item) => {
          return item.file_url;
        });
        if (this.showEditOnce == "true") {
          this.showEditBox();
          this.showEditOnce = false;
          localStorage.setItem("showEdit", "false");
        }
      }
    },
    // 获取项目动态
    async getLog() {
      let res = await GetDynamicLog({
        project_id: this.projectId,
        page: this.log_page,
        per_page: this.log_per_page,
      });
      if (res.code && res.code != 0) {
        this.logList = [];
        this.logTotal = 0;
      } else {
        if (this.log_page == 1) {
          this.logList = [];
        }
        this.logList = this.logList.concat(res.data);
        this.logTotal = res.size;
      }
      this.next = true;
    },
    nextLog() {
      if (this.next == true) {
        this.next = false;
        this.log_page += 1;
        this.getLog();
      }
    },
    downImg(item) {
      let link = document.createElement("a");
      document.body.appendChild(link);
      link.href = item.file_url;
      console.log(link.href);
      // URL.createObjectURL(blob)
      link.setAttribute("download", item.name);
      link.click();
      document.body.removeChild(link);
      URL.revokeObjectURL(link.href); // 销毁url对象
    },
    // 档案下载
    async downFileById() {
      if (this.permission.includes("109") == false) {
        this.$message.warning("暂无档案下载权限，请联系管理员！");
        return;
      }
      // this.projectInfo.project_name + "-项目文档.docx"
      let res = await DownloadFile({
        project_id: this.projectId,
      });
      if (res.code && res.code != 0) {
        this.$message.success("压缩包文件下载中请稍等~");
        exportWordDocx(
          "test.docx",
          {
            ...this.projectInfo,
            province: this.projectInfo.province.replace("；", ""),
            is_importance:
              this.projectInfo.is_importance == "是"
                ? "市重点项目"
                : this.projectInfo.is_importance == "否"
                ? "非市重点项目"
                : "",
            Schedule_list: this.Schedule_list,
            file_list: this.file_list,
            img_list: this.img_list,
          },
          this.projectInfo.project_name,
          true
        );
      } else {
        this.$message.success("压缩包文件下载中请稍等~");
        let BoldFile = await downFilesBy50(
          res.replace("http:/39.100.39.50:5051", "")
        );
        console.log(BoldFile);
        exportWordDocx(
          "test.docx",
          {
            ...this.projectInfo,
            province: this.projectInfo.province.replace("；", ""),
            is_importance:
              this.projectInfo.is_importance == "是"
                ? "市重点项目"
                : this.projectInfo.is_importance == "否"
                ? "非市重点项目"
                : "",
            Schedule_list: this.Schedule_list,
            file_list: this.file_list,
            img_list: this.img_list,
          },
          this.projectInfo.project_name,
          false,
          BoldFile
        );
        return;

        // let url = window.URL.createObjectURL(new Blob([BoldFile]));
        // // 生成一个a标签
        // let link = document.createElement("a");
        // link.style.display = "none";
        // link.href = url;
        // console.log(url);
        // // 生成时间戳
        // link.download = this.projectInfo.project_name + `-项目档案相关文件.zip`;
        // document.body.appendChild(link);
        // link.click();
      }
      this.getLog();
    },

    // 显示编辑弹框
    showEditBox() {
      if (this.permission.includes("110") == false) {
        this.$message.warning("暂无项目编辑权限，请联系管理员！");
        return;
      }
      this.editInfo = {
        ...this.projectInfo,
        province: this.projectInfo.province.split("；"),
      };
      this.changeFileList = this.file_list.map((item) => {
        return item;
      });
      this.changeFileList_img = this.img_list.map((item) => {
        return item;
      });
      this.img_del_list = [];
      this.file_del_list = [];
      this.showEdit = true;
    }, // 保存编辑
    async saveEdit() {
      if (
        this.editInfo.schedule_node == "已签约" &&
        this.editInfo.time1 == ""
      ) {
        this.$message.warning("请填写签约时间！");
        return;
      }
      if (
        this.editInfo.schedule_node == "已开工" &&
        this.editInfo.time2 == ""
      ) {
        this.$message.warning("请填写开工时间！");
        return;
      }
      if (
        this.editInfo.schedule_node == "已投产" &&
        this.editInfo.time3 == ""
      ) {
        this.$message.warning("请填写投产时间！");
        return;
      }
      let file_list =
        this.changeFileList.filter((item) => {
          return item.uid;
        }) || [];
      let img_list =
        this.changeFileList_img.filter((item) => {
          return item.uid;
        }) || [];
      let img_del_list = this.img_del_list || [];
      let file_del_list = this.file_del_list || [];

      let form = new FormData();
      if (img_del_list.length == 0) {
        form.append(`img_del_list`, []);
      }
      if (file_del_list.length == 0) {
        form.append(`file_del_list`, []);
      }
      if (file_list.length == 0) {
        form.append(`file_list`, []);
      }
      if (img_list.length == 0) {
        form.append(`img_list`, []);
      }
      img_del_list.forEach((item, i) => {
        form.append(`img_del_list`, item);
      });
      file_del_list.forEach((item, i) => {
        form.append(`file_del_list`, item);
      });
      // console.log(JSON.stringify(img_del_list));
      // console.log(JSON.stringify(file_del_list));

      // form.append(`img_del_list`, JSON.stringify(img_del_list));
      // form.append(`file_del_list`, JSON.stringify(file_del_list));
      img_list.forEach((element, i) => {
        if (element.raw) {
          form.append(`img_list`, element.raw);
        }
      });

      file_list.forEach((element, i) => {
        if (element.raw) {
          form.append(`file_list`, element.raw);
        }
      });
      form.append("project_id", this.projectId || "");

      form.append("acre_intensity", this.editInfo.acre_intensity || "");
      form.append(
        "capital_condition_money",
        this.editInfo.capital_condition_money || ""
      );
      form.append(
        "capital_condition_type",
        this.editInfo.capital_condition_type || ""
      );
      form.append(
        "construction_content",
        this.editInfo.construction_content || ""
      );
      form.append("district", this.editInfo.district || "");
      form.append("district_people", this.editInfo.district_people || "");
      form.append("industry", this.editInfo.industry || "");
      form.append("investment_volume", this.editInfo.investment_volume || "");
      form.append("is_enter13710", this.editInfo.is_enter13710 || "");
      form.append("is_importance", this.editInfo.is_importance || "");
      form.append("plan", this.editInfo.plan || "");
      form.append("project_appeal", this.editInfo.project_appeal || "");
      form.append("project_name", this.editInfo.project_name || "");
      form.append("project_people", this.editInfo.project_people || "");
      form.append("project_problem", this.editInfo.project_problem || "");
      form.append("project_promise", this.editInfo.project_promise || "");
      form.append("project_schedule", this.editInfo.project_schedule || "");
      form.append("project_source", this.editInfo.project_source || "");
      form.append("project_unit", this.editInfo.project_unit || "");
      form.append("province", this.editInfo.province.join("；") || "");
      form.append("schedule_node", this.editInfo.schedule_node || "");
      form.append("site", this.editInfo.site || "");
      form.append("time1", this.editInfo.time1 || "");
      form.append("time2", this.editInfo.time2 || "");
      form.append("time3", this.editInfo.time3 || "");
      form.append("unity_people", this.editInfo.unity_people || "");
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(255, 255, 255, 0.7)",
      });
      try {
        let res = await ProjectEdit(form);
        if (res.code == 0) {
          this.getProjectDetail();
          this.log_page = 1;
          this.getLog();

          this.$message.success(res.msg);
          this.showEdit = false;
          this.fileList = [];
          this.fileList_img = [];
          this.changeFileList = [];
          this.changeFileList_img = [];
          this.img_del_list = [];
          this.file_del_list = [];
        } else {
          this.$message.error(res.msg);
        }
        loading.close();
      } catch (error) {
        console.log("请求失败");
        loading.close();
      }
      loading.close();
    },
    // 显示调度提醒弹框
    showRemindBox() {
      if (this.permission.includes("111") == false) {
        this.$message.warning("暂无调度提醒权限，请联系管理员！");
        return;
      }
      this.showRemind = true;
      this.scheduling_condition = "";
      this.supervised_remind = "";
      this.type = "db";
    },
    // 保存调度、提醒
    async remind() {
      let res = await ScheduleRemind({
        project_id: this.projectId,
        scheduling_condition: this.scheduling_condition,
        supervised_remind: this.supervised_remind,
      });
      if (res.code == 0) {
        this.$message.success(res.msg);
        this.getProjectDetail();
        this.log_page = 1;
        this.getLog();
        this.showRemind = false;
      } else {
        this.$message.error(res.msg);
      }
    },
    // 返回顶部
    goTop() {
      let archives = this.$refs["archives"];
      if (archives.scrollTop > 0) {
        let timer = setInterval(() => {
          if (archives.scrollTop <= 0) {
            clearInterval(timer);
            return;
          }
          archives.scrollTop -= 40;
        }, 10);
      }
    },
    beforeUpload_img(file, fileList) {
      this.fileName = file.name;
      const isType =
        file.name.split(".")[file.name.split(".").length - 1] === "jpeg" ||
        file.name.split(".")[file.name.split(".").length - 1] === "jpg" ||
        file.name.split(".")[file.name.split(".").length - 1] === "png";
      // const isSize = file.size / 1024 / 1024 < 10;
      if (!isType) {
        this.$message({
          message: "只能上传jpeg、jpg或png文件!",
          type: "warning",
          showClose: true,
        });
      }
      return isType;
    },
    handleRemove_img(file, fileList) {
      this.fileList_img = fileList;
      this.changeFileList_img = fileList;
    },
    changeFile_img(file, fileList) {
      let that = this;
      let reader = new FileReader();
      reader.readAsDataURL(file.raw);
      reader.onload = (e) => {
        file.url = e.target.result;
        that.changeFileList_img.unshift(file);
      };
    },
    uploadFile_img(params) {},

    beforeUpload(file, fileList) {
      this.fileName = file.name;
      const isType =
        file.name.split(".")[file.name.split(".").length - 1] === "pdf" ||
        file.name.split(".")[file.name.split(".").length - 1] === "docx";
      // const isSize = file.size / 1024 / 1024 < 10;
      if (!isType) {
        this.$message({
          message: "只能上传docx或pdf文件!",
          type: "warning",
          showClose: true,
        });
      }
      return isType;
    },
    handleRemove(file, fileList) {
      this.fileList = fileList;
      this.changeFileList = fileList;
    },
    changeFile(file, fileList) {
      this.changeFileList.unshift(file);
    },
    uploadFile(params) {},
    lookFile(item) {
      if (item.name.includes("pdf")) {
        this.showFileBySrc = true;
        let url = window.URL.createObjectURL(item.raw);
        this.fileSrc = url;
        this.openFile = true;
      } else {
        this.showFileBySrc = false;
        this.openFile = true;
        this.$nextTick(() => {
          docx.renderAsync(item.raw, this.$refs.word);
        });
      }
    },
    closeFileShow() {
      this.openFile = false;
      this.fileSrc = "";
    },
    DelImg(item) {
      if (item.uid) {
        this.changeFileList_img.map((i, index) => {
          if (i.uid == item.uid) {
            this.changeFileList_img.splice(index, 1);
          }
        });
      } else {
        this.changeFileList_img.map((i, index) => {
          if (i.id == item.id) {
            this.changeFileList_img.splice(index, 1);
            this.img_del_list.push(i.id);
          }
        });
      }
    },
    delFile(item) {
      if (item.uid) {
        this.changeFileList.map((i, index) => {
          if (i.uid == item.uid) {
            this.changeFileList.splice(index, 1);
          }
        });
      } else {
        this.changeFileList.map((i, index) => {
          if (i.id == item.id) {
            this.changeFileList.splice(index, 1);
            this.file_del_list.push(i.id);
          }
        });
      }
    },
    async delImgById(item) {
      let res = await FileDelete({
        project_id: this.projectId,
        file_type: item.file_type,
        file_id: item.id,
      });
      if (res.code == 0) {
        this.$message.success(res.msg);
      } else {
        this.$message.error(res.msg);
      }
    },
    async delFileById(item) {
      let res = await FileDelete({
        project_id: this.projectId,
        file_type: item.file_type,
        file_id: item.id,
      });
      if (res.code == 0) {
        this.$message.success(res.msg);
      } else {
        this.$message.error(res.msg);
      }
    },

    goFile(item) {
      let routeUrl = this.$router.resolve({
        name: "files",
        query: {
          url: item.file_url,
        },
      });
      window.open(routeUrl.href, "_blank");
    },
    downFile(item) {
      let type = item.file_name.split(".")[
        item.file_name.split(".").length - 1
      ];
      let name = item.file_name.replace("." + type, "");
      let url = item.file_url.replace(
        "https://zysf-store.oss-cn-beijing.aliyuncs.com",
        "/file"
      );
      this.$axios({
        method: "get",
        url: url,
        responseType: "blob",
      })
        .then(async (res) => {
          $_downloadFile(res.data, name, type);
        })
        .catch(() => {});
    },
  },
};
</script>
<style lang="less" scoped>
.archives-content {
  width: 100%;
  height: 100%;
  background: #fcf9fc;

  .archives-main {
    margin: 0 auto;
    width: 1550px;
    height: 100%;
    background: #ffffff;
    box-shadow: 0px 0px 10px 0px rgba(189, 189, 189, 0.6);
  }
  .archives-flex {
    display: flex;
    height: calc(100% - 80px);
  }
  .archives-left {
    box-sizing: border-box;
    padding: 0 30px;
    flex: 1;
    height: 100%;
    box-shadow: 0px 0px 10px 0px rgba(189, 189, 189, 0.6);
    z-index: 9;
  }
  .archives-right {
    box-sizing: border-box;
    padding: 30px 0 30px 60px;
    flex: 0 0 520px;
    height: 100%;
    background: #f9f9f9;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
  }
}
.archives-title {
  position: relative;
  padding-left: 20px;
  width: 100%;
  height: 80px;
  line-height: 80px;
  background: #ffffff;
  box-shadow: 0px 2px 6px 0px rgba(4, 0, 0, 0.1);
  text-align: left;
  z-index: 99;
  & > span {
    display: inline-block;
    height: 100%;
    font-size: 20px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
    cursor: default;
  }
  & > span.active {
    font-weight: bold;
    color: #446db3;
    border-bottom: 4px solid #446db3;
  }
  & > div {
    margin-right: 30px;
    float: right;
    height: 80px;
    line-height: 80px;
    span {
      margin-left: 20px;
      display: inline-block;
      width: 100px;
      height: 38px;
      line-height: 38px;
      background: #5889dc;
      border-radius: 4px;
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #ffffff;
      text-align: center;
      cursor: pointer;
    }
  }
}
.work {
  text-align: left;
  img {
    margin-right: 10px;
    width: 17px;
    height: 19px;
    vertical-align: middle;
  }
  span {
    vertical-align: middle;
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #333333;
  }
}
.work-list {
  height: 100%;
  overflow-y: auto;
  scrollbar-color: #ccc #ccc;
  scrollbar-width: 6px;
  scrollbar-width: thin;
  overflow-y: auto;
  &::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: linear-gradient(0deg, #ccc, #ccc);
  }
  &::-webkit-scrollbar-track {
    background: rgba(204, 204, 204, 0.1);
    border-radius: 10px;
  }
  li {
    box-sizing: border-box;
    padding: 10px 30px 0 0;
    min-height: 74px;
    border-bottom: 1px solid #eee;
    display: flex;
  }
  .yuan {
    margin-top: 5px;
    flex: 0 0 10px;
    display: inline-block;
    margin-right: 8px;
    width: 10px;
    height: 10px;
    background: #cccccc;
    border-radius: 50%;
    vertical-align: middle;
  }
  p {
    flex: 1;
    text-align: left;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
  }
  .time {
    float: right;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #cccccc;
  }
  .more {
    margin: 0 auto;
    line-height: 55px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #999999;
    text-align: center;
    cursor: default;
    img {
      margin-top: -2px;
    }
  }
  .none {
    margin: 0 auto;
    line-height: 55px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #cccccc;
    text-align: center;
    cursor: default;
  }
}
.detail-title {
  height: 66px;
  font-size: 22px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #446db3;
  line-height: 66px;
  border-bottom: 1px solid #eee;
  text-align: center;
}
.go-top {
  margin: 20px auto 0;
  width: 120px;
  height: 38px;
  line-height: 38px;
  background: #5889dc;
  border-radius: 4px;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #ffffff;
  cursor: default;
}
.archives {
  height: calc(100% - 140px);
  overflow-y: auto;
  text-align: left;
  scrollbar-color: #767ffe #e9f3ff;
  scrollbar-width: 6px;
  scrollbar-width: thin;
  overflow-y: auto;
  &::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: linear-gradient(0deg, #767ffe, #79aefe);
  }
  &::-webkit-scrollbar-track {
    background: #e9f3ff;
    border-radius: 10px;
  }
}
.title-weight {
  margin: 30px 0 20px;
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #333333;
  line-height: 18px;
}
.label {
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #666666;
  line-height: 34px;
  opacity: 0.8;
}
.flex-box {
  display: flex;
  flex-wrap: wrap;
  & > p {
    padding-right: 60px;
    flex: 0 0 50%;
  }
  & > p.long {
    flex: 0 0 100%;
  }
}
/deep/ .archives {
  .el-input {
    height: 32px;
    line-height: 32px;
    background: #f7f7f7;
    margin-bottom: 10px;
  }
  .el-input__inner {
    height: 32px;
    line-height: 32px;
    background: #f7f7f7;
    border: 1px solid #cccccc;
    opacity: 0.85;
    border-radius: 5px;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #666666;
  }

  .el-textarea {
    height: 80px;
    opacity: 0.85;
    border-radius: 5px;
    margin-bottom: 10px;
  }
  .el-textarea .el-textarea__inner {
    height: 80px;
    background: #f7f7f7;
    border: 1px solid #cccccc;
    opacity: 0.85;
    border-radius: 5px;
    resize: none;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #666666;
  }
  .long-more .el-textarea,
  .long-more .el-textarea .el-textarea__inner {
    height: 120px;
  }
  .long-more .schedule {
    box-sizing: border-box;
    padding: 5px 15px;
    display: block;
    height: 120px;
    overflow-y: auto;
    background: #f7f7f7;
    border: 1px solid #cccccc;
    opacity: 0.85;
    border-radius: 5px;

    scrollbar-color: #767ffe #e9f3ff;
    scrollbar-width: 8px;
    scrollbar-width: thin;
    overflow-y: auto;
    &::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }
    &::-webkit-scrollbar-thumb {
      border-radius: 8px;
      background: linear-gradient(0deg, #767ffe, #79aefe);
    }
    &::-webkit-scrollbar-track {
      background: #e9f3ff;
      border-radius: 8px;
    }
    span {
      display: block;
      margin-bottom: 6px;
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #666666;
      // white-space: pre;
      em {
        white-space: pre;
      }
    }
  }
}

.file-list {
  min-height: 50px;
  line-height: 50px;
  cursor: default;
  text-align: left;
  span,
  img {
    vertical-align: middle;
  }
  span {
    font-family: Microsoft YaHei;
    font-weight: 400;
  }
  .name {
    display: inline-block;
    max-width: 260px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin: 0 14px;
    font-size: 16px;
    color: #666666;
  }
  .s {
    margin: 0 10px 0 6px;
    font-size: 14px;
    color: #999999;
  }
  .d {
    margin: 0 0 0 6px;
    font-size: 14px;
    color: #999999;
  }
}
.file-show {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #fff;
  z-index: 999999;
  .gb {
    position: absolute;
    right: 50px;
    top: 30px;
    font-size: 18px;
    display: inline-block;
    width: 100px;
    height: 40px;
    line-height: 40px;
    font-weight: 400;
    background: #446db3;
    color: #ffffff;
    border-radius: 8px;
    text-align: center;
    cursor: pointer;
  }
  .word,
  .xlsx,
  iframe {
    width: 100vw;
    height: 100vh;
    overflow: auto;
  }
  .xlsx {
    .title {
      height: 100px;
      line-height: 100px;
      font-size: 24px;
    }
    /deep/ .el-table {
      width: 100% !important;
    }
  }
}
.img-group {
  img {
    width: 100%;
    display: block;
    border-radius: 5px;
  }

  .img-btn {
    height: 60px;
    line-height: 60px;
    display: flex;
    justify-content: space-between;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #666666;
    img {
      display: inline-block;
      width: 16px;
      height: 16px;
      vertical-align: middle;
      margin-top: -4px;
      margin-right: 4px;
    }
    span:last-of-type {
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #999999;
    }
    .img222:hover span {
      color: #f05947;
    }
    .img111:hover span {
      color: #5889dc;
    }
  }
}

/deep/ .el-dialog--center .el-dialog__body {
  padding: 10px 0;
}

/deep/ .el-dialog {
  padding: 0 88px;
  top: 50%;
  margin-top: -180px !important;
  height: 360px;
  background: #ffffff;
  box-shadow: 0px 5px 50px 0px rgba(186, 186, 186, 0.5);
  border-radius: 20px;
  .el-dialog__header {
    padding: 0;
    height: 80px;
    line-height: 80px;
    border-bottom: 1px dashed #dddddd;

    .el-dialog__title {
      display: block;
      line-height: 80px;
      font-size: 30px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #446db3;
    }
  }
  .el-dialog__footer {
    position: absolute;
    bottom: 40px;
    left: 50%;
    margin-left: -258px;
    padding: 0;
    .el-button {
      padding: 0;
      width: 248px;
      height: 48px;
      border: 2px solid #446db3;
      border-radius: 10px;
      font-size: 26px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #446db3;
    }
    .el-button--primary {
      padding: 0;
      margin-left: 20px;
      color: #fff;
      background: #446db3;
      box-shadow: 0px 2px 5px 0px rgba(68, 109, 179, 0.5);
    }
  }

  .d-content {
    width: 420px;
    margin: 0 auto;
    .label-name {
      margin: 10px 0 6px;
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #666666;
      line-height: 34px;
    }
    .label-input {
      padding-left: 12px;
      width: 420px;
      height: 32px;
      line-height: 32px;
      background: #f7f7f7;
      border: 1px solid #cccccc;
      border-radius: 5px;
    }
  }
}
.import /deep/ .el-dialog {
  margin-top: -182px !important;
  height: 364px;
}
.edit-dialog /deep/ .el-dialog {
  margin-top: -45vh !important;
  width: 1030px;
  height: 90vh;
}

/deep/ .el-dialog__body {
  padding: 30px 0px 30px 200px;
}
/deep/ .not-padding .el-dialog__body {
  padding: 48px 0;
}
.card-tip {
  padding: 0 40px;
  display: flex;
  // flex-direction: column;
  // justify-content: space-between;
  div {
    flex: 0 0 122px;
    height: 110px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    span {
      position: relative;
      display: inline-block;
      width: 108px;
      height: 50px;
      line-height: 50px;
      background: #eff1f5;
      border-radius: 4px;
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #666666;
      cursor: default;
      span {
        z-index: 99;
        cursor: default;
      }
    }
    span.active {
      font-weight: bold;
      color: #ffffff;
      background: #446db3;
      span {
        font-weight: bold;
        color: #ffffff;
        background: #446db3;
      }
    }
    span.active::after {
      content: "";
      position: absolute;
      right: -4px;
      top: 50%;
      margin-top: -10px;
      width: 20px;
      height: 20px;
      background: #446db3;
      border-radius: 2px;
      transform: rotate(45deg);
      z-index: 9;
    }
  }
  div.el-textarea {
    flex: 1;
    height: 110px;
    background: #f7f7f7;
    border-radius: 8px;
  }
  /deep/ div.el-textarea .el-textarea__inner {
    box-sizing: border-box;
    padding: 18px;
    height: 110px;
    resize: none;
  }
}

/deep/.edit-dialog {
  .el-dialog__body {
    padding: 0;
    height: calc(90vh - 180px);
    overflow-y: auto;
    scrollbar-color: #767ffe #e9f3ff;
    scrollbar-width: 6px;
    scrollbar-width: thin;
    overflow-y: auto;
    &::-webkit-scrollbar {
      width: 10px;
      height: 10px;
    }
    &::-webkit-scrollbar-thumb {
      border-radius: 10px;
      background: linear-gradient(0deg, #767ffe, #79aefe);
    }
    &::-webkit-scrollbar-track {
      background: #e9f3ff;
      border-radius: 10px;
    }
  }
  .flex-box {
    justify-content: space-between;
  }
  .flex-box > p {
    padding-right: 20px;
    flex: 0 0 46%;
  }
  .flex-box > p.long {
    flex: 0 0 100%;
  }
  .flex-box-2 > p {
    flex: 0 0 33%;
  }

  .archives {
    .el-input {
      background: #ffffff;
    }
    .el-input__inner {
      background: #ffffff;
      border: 1px solid #cccccc;
    }
    .el-input__inner:disabled {
      background: #f7f7f7;
      border: 1px solid #cccccc;
      color: #666666;
    }
    .el-textarea .el-textarea__inner {
      background: #ffffff;
      border: 1px solid #cccccc;
    }
  }
  .upload {
    text-align: left;
    margin-bottom: 20px;
    .s-title {
      margin-bottom: 10px;
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #666666;
    }
  }
  .files {
    .el-upload__tip {
      margin-left: 16px;
      display: inline-block;
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #999999;
    }
    .upload-demo {
      min-height: 140px;
    }
    .el-button {
      margin-top: 20px;
      padding: 0;
    }
    .el-button--small {
      margin: 0;
      padding: 0;
      width: 133px;
      height: 38px;
      line-height: 38px;
      background: #5889dc;
      border-radius: 4px;
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #ffffff;
      vertical-align: middle;
      img {
        margin-right: 5px;
        position: relative;
        left: 0;
        top: 1px;
      }
    }
  }
  .el-select,
  .el-date-editor {
    display: block;
    width: 100%;
  }
  .el-input__icon {
    line-height: 32px;
  }
  .el-icon-arrow-up:before {
    display: inline-block;
    width: 14px;
    height: 8px;
    content: "";
    background: url("~@img/portrait/icon-select-down.png") no-repeat center;
    transform: rotate(180deg);
  }
  .el-cascader {
    display: block;
  }
  .money {
    display: flex;

    .el-input {
      border-left: 0;
    }

    .el-input .el-input__inner {
      border-left: 0;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }

    .el-select {
      flex: 0 0 140px;
      border-right: 0;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
    .el-select .el-input__inner {
      border-right: 0;
      border-left: 1px solid #ccc;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
  }
}
.null {
  margin: 5px 0 10px;
  display: block;
  width: 120px;
  height: 40px;
  background: #f5f5f5;
  border-radius: 6px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #999999;
  line-height: 40px;
  text-align: center;
}
.ellipsis {
  width: 340px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/*
  *常用电脑尺寸  1680 * 900
  *              1512 * 790
  *              1440 * 900
  *ipad pro      1366 * 1024
  *ipad mini     1024 * 768
  *ipad          1024 * 768
 */
/*分辨率低于1680，采用下面的样式*/
@media screen and (max-device-width: 1680px) {
}
/*分辨率低于1536，采用下面的样式*/
@media screen and (max-device-width: 1580px) {
  .archives-content .archives-main {
    margin: 0 auto;
    width: 1440px;
  }
  .archives-content .archives-right {
    padding: 30px 0 30px 40px;
    flex: 0 0 500px;
  }
  .ellipsis {
    width: 260px;
  }
}
/*分辨率低于1440，采用下面的样式*/
@media screen and (max-device-width: 1440px) {
  .archives-content .archives-main {
    margin: 0 auto;
    width: 1366px;
  }
}
/*分辨率低于1366，采用下面的样式*/
@media screen and (max-device-width: 1366px) {
  .archives-content .archives-main {
    margin: 0 auto;
    width: 1240px;
  }
  .archives-content .archives-right {
    padding: 30px 0 30px 20px;
    flex: 0 0 400px;
  }
  .ellipsis {
    width: 220px;
  }
}
/*分辨率低于1180，采用下面的样式*/
@media screen and (max-device-width: 1180px) {
  .archives-content .archives-main {
    margin: 0 auto;
    width: 1024px;
  }
  .archives-content .archives-right {
    padding: 30px 0 30px 20px;
    flex: 0 0 320px;
  }
  .ellipsis {
    width: 180px;
  }
}
/*分辨率低于1024，采用下面的样式*/
@media screen and (max-device-width: 1024px) {
}
</style>
<style>
.el-image-viewer__mask {
  opacity: 0.6;
}
.el-image__preview {
  border-radius: 5px;
}
</style>
